<template>
  <div class="about">
    <div class="count" v-if="showIndex < 4">
      <h3>{{ list[showIndex].title }}</h3>
      <ul>
        <li v-for="(item, index) in list[showIndex].child" :key="index">
          <input type="radio" :value="index" v-model="checkVal" />
          {{ item }}
        </li>
      </ul>
      <button @click="submit" :disabled="timeMsg ? true : false">
        {{ btnMsg }}
      </button>
      <p>{{ timeMsg }}</p>
      <p>
        共有{{ showIndex + 1 }}/{{ list.length }},道题，答对：{{
          sureNum
        }}，答错：{{ errNum }}
      </p>
    </div>
    <div v-else>
      没有了！<button @click="(showIndex = 0), (sureNum = 0), (errNum = 0)">
        重做一遍
      </button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      list: [
        {
          title: "p标签是干什么用的？",
          child: ["实现换行的", "显示图片的", "制作按钮的", "实现分段的"],
          answer: 3,
        },
        {
          title: "a标签是干什么用的？",
          child: ["实现换行的", "显示图片的", "超链接按钮", "实现分段的"],
          answer: 2,
        },
        {
          title: "img标签是干什么用的？",
          child: ["实现换行的", "显示图片的", "制作按钮的", "实现分段的"],
          answer: 1,
        },
        {
          title: "br标签是干什么用的？",
          child: ["实现换行的", "显示图片的", "制作按钮的", "实现分段的"],
          answer: 0,
        },
      ],
      checkVal: "",
      showIndex: 0,
      btnMsg: "提交答案",
      sureNum: 0, // 答对的题的数量
      errNum: 0, // 答错题的数量
      timeMsg: "", // 倒计时内容
    };
  },
  methods: {
    submit() {
      // 提交事件
      // 如果 if 判断的是 "" 0  都会返回 false
      if (this.checkVal === "") {
        alert("请选择一个答案");
        return;
      }
      if (this.list[this.showIndex].answer == this.checkVal) {
        this.sureNum = this.sureNum + 1;
        this.btnMsg = "回答正确";
      } else {
        this.errNum = this.errNum + 1;
        this.btnMsg = "回答错误";
      }
      let num = 3;
      this.timeMsg = `${num}s后进入下一题`;
      let time = setInterval(() => {
        if (num > 0) {
          num--;
          this.timeMsg = `${num}s后进入下一题`;
        } else {
          clearInterval(time);
          this.checkVal = "";
          this.timeMsg = ``;
          this.showIndex = this.showIndex + 1; // 进入下一题
          this.btnMsg = "提交答案";
        }
      }, 1000);
    },
  },
};
</script>
<style lang="scss" scoped>
.count {
  width: 400px;
  margin: 100px auto;
}
ul {
  list-style: none;
}
</style>
